import { autorun, makeAutoObservable, runInAction } from "mobx";
import yayJpg from "../assets/yay.jpg";
import { observer } from "mobx-react-lite";

class Message {
  likes: { title: string; key: number }[] = [];
  public id: number = 0;
  public name: string = "你好";
  constructor() {
    makeAutoObservable(this);
  }
  author: { name: string } = { name: "wangbin " };
}
let store = new Message();

export default observer(function HomePage() {
  const handleChange = () => {};
  autorun(() => {
    setTimeout(() => {
      console.log(store.likes);
    }, 100);
  });
  runInAction(() => {
    store.likes.push({ title: "你好我是兴趣1", key: Math.random() });
  });
  return (
    <div>
      <h2>Yay! Welcome to umi!</h2>
      <button
        onClick={() =>
          runInAction(() => {
            store.likes.push({
              title: "兴趣" + Math.random(),
              key: Math.random(),
            });
          })
        }
      >
        新增随机兴趣
      </button>
      <button onClick={handleChange}>重置兴趣</button>
      <ul>
        {store.likes.map(({ title, key }) => (
          <li key={key}>{title}</li>
        ))}
      </ul>
    </div>
  );
});
